<script lang="ts" setup>
import { ClassChangeApi } from '@/apis'

const emits = defineEmits(['change'])
const visible = ref(false)
const detail = ref()
const loading = ref(false)

const getDetail = async (id: string) => {
  loading.value = true
  detail.value = await ClassChangeApi.getChangeDetail(id)
  loading.value = false
}

const onRevertRecord = async () => {
  try {
    loading.value = true
    const req = {
      recordId: detail.value.id,
    }
    await ClassChangeApi.revertChangeRecord(req)
    detail.value = await ClassChangeApi.getChangeDetail(detail.value.id)
    emits('change')
  } finally {
    loading.value = false
  }
}

const open = (id: string) => {
  getDetail(id)
  visible.value = true
}

defineExpose({
  open,
})
</script>

<template>
  <a-drawer width="35%" title="详情" :visible="visible" :footer="false" @cancel="visible = false">
    <a-card v-if="detail" title="基础信息" :bordered="false" class="section">
      <template #extra>
        <a-popconfirm content="是否要撤销该记录？" @ok="onRevertRecord">
          <a-button type="outline" status="danger" size="mini">
            <a-space size="mini">
              <icon-undo />
              <span>撤销</span>
            </a-space>
          </a-button>
        </a-popconfirm>
      </template>
      <a-grid :cols="2" :col-gap="12" :row-gap="16">
        <a-grid-item>
          <div class="color-[#999]">
            学生
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail?.studentName }}
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            操作
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.changeType" code="ChangeTypeEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            申请方式
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.operateSource" code="OperateSourceEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            申请状态
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.operateStatus" code="OperateStatusEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            创建人
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail.createUserName ? detail.createUserName : '-' }}
          </div>
        </a-grid-item>
      </a-grid>
    </a-card>
    <a-card v-if="detail" title="转出信息" :bordered="false" class="section">
      <div>
        <div>
          <div class="color-[#999]">
            班级：
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail.originalClassName || '-' }}
          </div>
        </div>
        <a-row class="mt-2">
          <a-col :span="12">
            <div class="color-[#999]">
              教师：
            </div>
            <div class="mt-1 color-[#111]">
              {{ detail.originalLeadTeacherName }}
            </div>
          </a-col>
          <a-col :span="12">
            <div class="color-[#999]">
              教室：
            </div>
            <div class="mt-1 color-[#111]">
              {{ detail.originalClassroomName }}
            </div>
          </a-col>
        </a-row>
        <div class="mt-2 color-[#999]">
          转出课次：
        </div>
        <div v-for="(item, index) in detail.originalLesson" :key="index" class="mt-2 color-[#111]">
          {{ item.title }}-({{ item.startTime }}-{{ item.endTime }})
        </div>
      </div>
    </a-card>
    <a-card v-if="detail" title="转入信息" :bordered="false" class="section">
      <div>
        <div>
          <div class="color-[#999]">
            班级：
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail.targetClassName || '-' }}
          </div>
        </div>
        <a-row class="mt-2">
          <a-col :span="12">
            <div class="color-[#999]">
              教师：
            </div>
            <div class="mt-1 color-[#111]">
              {{ detail.targetLeadTeacherName }}
            </div>
          </a-col>
          <a-col :span="12">
            <div class="color-[#999]">
              教室：
            </div>
            <div class="mt-1 color-[#111]">
              {{ detail.targetClassroomName }}
            </div>
          </a-col>
        </a-row>
        <div class="mt-2 color-[#999]">
          转出课次：
        </div>
        <div v-for="(item, index) in detail.targetLesson" :key="index" class="mt-2 color-[#111]">
          {{ item.title }}-({{ item.startTime }}-{{ item.endTime }})
        </div>
      </div>
    </a-card>
  </a-drawer>
</template>

<style lang='less' scoped></style>
